<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_使用计算属性实现简写</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <h1>计算属性</h1>
        <h2>1. 定义</h2>
        <p>要用的属性不存在，要通过已有属性计算得来</p>

        <h2>2. 原理</h2>
        <p>底层借助了Object.defineproperty方法提供的getter和setter</p>

        <h2>3. get有什么作用</h2>
        <p>当有人读取计算属性时，get就会被调用，且返回值作为计算属性的值。</p>

        <h2>4. get什么时候调用</h2>
        <p>4.1 初次读取计算属性时。</p>
        <p>4.2 所依赖的数据发生变化时。</p>

        <h2>5. 优势</h2>
        <p>与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。</p>

        <h2>6. 备注</h2>
        <p>6.1 计算属性最终会出现在vm上，直接读取使用即可。</p>
        <p>6.2 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。</p>
        <img src="../images/计算属性.png" alt="">

        <h1>例子</h1>
        <div id="root">
            姓：<input type="text" v-model="firstName"> <br><br>
            名：<input type="text" v-model="lastName"> <br><br>
            全名：<span>{{fullName}}</span>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            const vm = new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    firstName: '张',
                    lastName: '三'
                },
                computed: {
                    fullName: {
                        get(){
                            return this.firstName + '-' + this.lastName
                        },
                        set(value){
                            console.log('set', value)
                            const arr = value.split('-')
                            this.firstName = arr[0]
                            this.lastName = arr[1]
                        }
                    }
                }
            })
        </script>
    </body>
</html>
